<template>
  <el-container>
    <el-header height="270px" style="background-color: #F0F8F8; padding: 10px;">
      <el-scrollbar style="height:100%;overflow-x:hidden">
        <div>
          <div>
            <div class="nameClass" v-html="term.name"></div>
            <div v-for="nameSourceItem of term.nameSource" style="color: #959999;font-size: 10px" v-html="'《' + nameSourceItem.name + '》（' +
          CONST.TERM_SOURCE[nameSourceItem.category] + '）'"></div>
            <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                 v-if="UTIL.isNotEmpty(term[prop]) && term[prop].length > 0">
              <div class="fieldName">{{ propName }}：</div>
              <div v-if="typeof term[prop] === 'string'" class="name-content" v-html="term[prop]"></div>
              <div v-else class="name-content" v-html="UTIL.arrayToStr(term[prop], 'value', ';')"></div>
            </div>
            <hr style="margin-left: 0px; margin-top: 20px; width: 60%;"/>
            <div>
              <div class="fieldName">释义：</div>
              <div v-for="item in term.explanation" style="margin-top: 15px;">
                <div v-html="item.value"></div>
                <div
                  style="margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; width: 65%;text-align: right;">
                  <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                  <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                    {{ item.version }} -
                  </div>
                  <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                </div>
              </div>
            </div>
          </div>
        </div> <!-- 知识内容 -->
      </el-scrollbar>
    </el-header>
    <br/>
    <el-main style="background-color: #F0F8F8;height: 300px; overflow: hidden;">
      <span style="font-size: 18px;">更新记录</span>
      <el-scrollbar style="height:100%">
        <el-row>
          <el-col :span="8" style="border-right: 1px solid #7D8080;padding: 10px">
            <div style="text-align: center;font-weight: bold;margin-bottom: 10px">
              <span>入库术语</span>
            </div>
            <div>
              <div class="nameClass" v-html="termConflict.name"></div>
              <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                   v-if="UTIL.isNotEmpty(termConflict[prop]) && termConflict[prop].length > 0">
                <div class="fieldName">{{ propName }}：</div>
                <div v-if="typeof termConflict[prop] === 'string'" class="name-content"
                     v-html="termConflict[prop]"></div>
                <div v-else class="name-content" v-html="UTIL.arrayToStr(termConflict[prop], 'value', ';')"></div>
              </div>
              <div>
                <div class="fieldName">释义：</div>
                <div v-for="item in termConflict.explanation" style="margin-top: 15px;">
                  <div v-html="item.value"></div>
                  <div style="margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; text-align: right;">
                    <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                    <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                      {{ item.version }} -
                    </div>
                    <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8" style="border-right: 1px solid #7D8080;padding: 10px">
            <div>
              <div style="text-align: center;font-weight: bold;margin-bottom: 10px">
                <span>标准术语</span>
              </div>
              <div>
                <div class="nameClass" v-html="standardConflict.name"></div>
                <div v-for="nameSourceItem of standardConflict.nameSource" style="color: #959999;font-size: 10px"
                     v-html="'《' + nameSourceItem.name + '》（' +
          CONST.TERM_SOURCE[nameSourceItem.category] + '）'"></div>
                <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                     v-if="UTIL.isNotEmpty(standardConflict[prop]) && standardConflict[prop].length > 0">
                  <div class="fieldName">{{ propName }}：</div>
                  <div v-if="typeof standardConflict[prop] === 'string'"
                       :style="{color: term[prop + 'Color']}"
                       class="name-content" v-html="standardConflict[prop]"></div>
                  <div v-else class="name-content" v-bind::style="{color: term[prop + 'Color']}"
                       v-html="UTIL.arrayToStr(standardConflict[prop], 'value', ';')"></div>
                </div>
                <div>
                  <div class="fieldName">释义：</div>
                  <div v-for="item in standardConflict.explanation" style="margin-top: 15px;">
                    <div
                      :style="{color:(formatTerm.explanation.find(itemExplain => itemExplain === item.value) ? 'black' : 'red')}"
                      v-html="item.value"></div>
                    <div style="margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; text-align: right;">
                      <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                      <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                        {{ item.version }} -
                      </div>
                      <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div> <!-- 知识内容 -->
          </el-col>
          <el-col :span="8" style="border-right: 1px solid #7D8080;padding: 10px">
            <div>
              <div style="text-align: center;font-weight: bold;margin-bottom: 10px">
                <span>冲突结果</span>
              </div>
              <div>
                <div class="nameClass" v-html="term.name"></div>
                <div v-for="nameSourceItem of term.nameSource" style="color: #959999;font-size: 10px" v-html="'《' + nameSourceItem.name + '》（' +
          CONST.TERM_SOURCE[nameSourceItem.category] + '）'"></div>
                <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                     v-if="UTIL.isNotEmpty(term[prop]) && term[prop].length > 0">
                  <div class="fieldName">{{ propName }}：</div>
                  <div v-if="typeof term[prop] === 'string'"
                       :style="{color: term[prop + 'Color']}"
                       class="name-content" v-html="term[prop]"></div>
                  <div v-else
                       :style="{color: term[prop + 'Color']}"
                       class="name-content"
                       v-html="UTIL.arrayToStr(term[prop], 'value', ';')"></div>
                </div>
                <div>
                  <div class="fieldName">释义：</div>
                  <div v-for="item in term.explanation" style="margin-top: 15px;">
                    <!-- 如果合并后的术语释义不在冲突的标准术语释义中,则标红 -->
                    <div
                      :style="{color:(formatStandardConflict.explanation.find(itemExplain => itemExplain === item.value) ? 'black' : 'red')}"
                      v-html="item.value"></div>
                    <div style="margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; text-align: right;">
                      <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                      <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                        {{ item.version }} -
                      </div>
                      <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div> <!-- 知识内容 -->
          </el-col>
        </el-row>
      </el-scrollbar>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "TermAutomaticUpdate",
  props: {
    id: String,
    list: Array
  },
  data() {
    return {
      term: {},
      termConflict: {},
      standardConflict: {},
      formatTerm: {
        synonym: [],
        englishName: [],
        englishNameSynonym: [],
        englishAbbr: [],
        englishAbbrSynonym: [],
        frenchName: [],
        frenchNameSynonym: [],
        russianName: [],
        russianNameSynonym: [],
        germanName: [],
        germanNameSynonym: [],
        japaneseName: [],
        japaneseNameSynonym: [],
        explanation: []
      },
      formatStandardConflict: {
        synonym: [],
        englishName: [],
        englishNameSynonym: [],
        englishAbbr: [],
        englishAbbrSynonym: [],
        frenchName: [],
        frenchNameSynonym: [],
        russianName: [],
        russianNameSynonym: [],
        germanName: [],
        germanNameSynonym: [],
        japaneseName: [],
        japaneseNameSynonym: [],
        explanation: []
      }
    }
  },
  methods: {
    loadContent(standardId) {
      this.axios.get("/pmph/action/term/selectConflictCreateTable", {
        params: {
          id: standardId
        }
      }).then(response => {
        // 冲突的入库术语
        let that = this
        this.termConflict = response.data.filter(item => (item.version === that.term.version && item.termType === 0))[0];
        // 冲突的标准术语
        this.standardConflict = response.data.filter(item => (item.version === that.term.version - 1 && item.termType === 3))[0];
        for (let key in CONST.TERM_STANDARD_PROPERTY) {
          if (key === 'synonym') {
            continue;
          }
          this.formatTerm[key] = that.term[key].split(";").filter(UTIL.isNotEmpty)
          this.formatStandardConflict[key] = this.standardConflict[key].split(";").filter(UTIL.isNotEmpty)
        }
        this.formatTerm.synonym = that.term.synonym.map(item => item.value);
        this.formatTerm.explanation = that.term.explanation.map(item => item.value);
        this.formatStandardConflict.synonym = this.standardConflict.synonym.map(item => item.value);
        this.formatStandardConflict.explanation = this.standardConflict.explanation.map(item => item.value);
        this.setPropColor()
      })
    },
    setPropColor() {
      for (let prop in CONST.TERM_STANDARD_PROPERTY) {
        if (this.formatTerm[prop].length !== this.formatStandardConflict[prop].length) {
          this.$set(this.term, prop + 'Color', 'red')
          this.$set(this.standardConflict, prop + 'Color', 'red')
        } else if (this.formatTerm[prop].sort((item1, item2) => item1 - item2).toString() !==
          this.formatStandardConflict[prop].sort((item1, item2) => item1 - item2).toString()) {
          this.$set(this.term, prop + 'Color', 'red')
          this.$set(this.standardConflict, prop + 'Color', 'red')
        } else {
          this.$set(this.term, prop + 'Color', 'black')
          this.$set(this.standardConflict, prop + 'Color', 'black')
        }
      }
    }
  },
  mounted() {
    this.term = this.list.find(item => item.id === this.id)
    this.loadContent(this.list[0].standardId)
  },
  watch: {
    id() {
      this.term = this.list.find(item => item.id === this.id)
      this.loadContent(this.list[0].standardId, this.term)
    }
  }
}
</script>

<style scoped>

/deep/ .el-scrollbar__wrap {
  overflow: auto;
}

.nameClass {
  font-size: 16px;
  font-weight: bold;
}

.name-content {
  font-size: 16px;
  display: inline-block;
}

.fieldName {
  font-family: MicrosoftYaHei-Bold, sans-serif;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0;
  display: inline-block;
  margin-top: 15px;
}

.line {
  display: inline-block;
}

.vertical-align-top {
  vertical-align: top;
}
</style>
